<!--
  ~ /*
  ~  * Copyright (c) 2021 gngpp
  ~  *
  ~  * Permission is hereby granted, free of charge, to any person obtaining a copy
  ~  * of this software and associated documentation files (the "Software"), to deal
  ~  * in the Software without restriction, including without limitation the rights
  ~  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  ~  * copies of the Software, and to permit persons to whom the Software is
  ~  * furnished to do so, subject to the following conditions:
  ~  *
  ~  * The above copyright notice and this permission notice shall be included in all
  ~  * copies or substantial portions of the Software.
  ~  *
  ~  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  ~  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  ~  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  ~  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  ~  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING COMMUNICATION_AUTHORIZATION,
  ~  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  ~  * SOFTWARE.
  ~  *
  ~  */
  -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
          integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" rel="stylesheet">
    <title>Custom consent page - Consent required</title>
    <style>
        body {
            background-color: aliceblue;
        }
    </style>
    <script>
        function cancelConsent() {
            document.consent_form.reset();
            document.consent_form.submit();
        }
    </script>
</head>
<body>
<div class="container">
    <div class="py-5">
        <h1 class="text-center text-primary">App permissions</h1>
    </div>
    <div class="row">
        <div class="col text-center">
            <p>
                The application
                <span class="font-weight-bold text-primary" th:text="${clientId}"></span>
                wants to access your account
                <span class="font-weight-bold" th:text="${principalName}"></span>
            </p>
        </div>
    </div>
    <div class="row pb-3">
        <div class="col text-center"><p>The following permissions are requested by the above app.<br/>Please review
            these and consent if you approve.</p></div>
    </div>
    <div class="row">
        <div class="col text-center">
            <form action="/oauth2/authorize" method="post" name="consent_form">
                <input name="client_id" th:value="${clientId}" type="hidden">
                <input name="state" th:value="${state}" type="hidden">

                <div class="form-group form-check py-1" th:each="scope: ${scopes}">
                    <input class="form-check-input"
                           name="scope"
                           th:id="${scope.scope}"
                           th:value="${scope.scope}"
                           type="checkbox">
                    <label class="form-check-label font-weight-bold" th:for="${scope.scope}"
                           th:text="${scope.scope}"></label>
                    <p class="text-primary" th:text="${scope.description}"></p>
                </div>

                <p th:if="${not #lists.isEmpty(previouslyApprovedScopes)}">You have already granted the following
                    permissions to the above app:</p>
                <div class="form-group form-check py-1" th:each="scope: ${previouslyApprovedScopes}">
                    <input checked
                           class="form-check-input"
                           disabled
                           th:id="${scope.scope}"
                           type="checkbox">
                    <label class="form-check-label font-weight-bold" th:for="${scope.scope}"
                           th:text="${scope.scope}"></label>
                    <p class="text-primary" th:text="${scope.description}"></p>
                </div>

                <div class="form-group pt-3">
                    <button class="btn btn-primary btn-lg" id="submit-consent" type="submit">
                        Submit Consent
                    </button>
                </div>
                <div class="form-group">
                    <button class="btn btn-link regular" id="cancel-consent" onclick="cancelConsent();" type="button">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="row pt-4">
        <div class="col text-center">
            <p>
                <small>
                    Your consent to provide access is required.
                    <br/>If you do not approve, click Cancel, in which case no information will be shared with the app.
                </small>
            </p>
        </div>
    </div>
</div>
</body>
</html>
